<template>
    <div class="message-box">
        <div class="message-body">
            <div class="icon-tip">
                <svg v-if="type=='success'" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" fill="#00BB9C" xml:space="preserve">
                    <g>
                        <path d="M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490C990,229.4,770.6,10,500,10L500,10z M737.8,412.8L430.5,720.2c-0.4,0.4-0.8,0.8-1.3,1.2c-6.7,5.5-16.6,5.1-22.8-1.2L219.6,533.4c-6.7-6.7-6.7-17.4,0-24.1l66.3-66.3c6.7-6.7,17.4-6.7,24.1,0l108.5,108.5l229-229c6.7-6.7,17.4-6.7,24.1,0l66.3,66.3C744.5,395.4,744.5,406.2,737.8,412.8L737.8,412.8z" />
                    </g>
                </svg>
                <svg v-if="type=='error'" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" fill="#EB4F38" xml:space="preserve">
                    <g>
                        <path d="M847.3,152.9c48,48,83.7,102,107.3,162c23.6,60,35.4,121.5,35.4,184.5c0,63-11.8,124.5-35.4,184.5c-23.6,60-59.4,114-107.3,162c-48,48-101.9,84-161.8,108c-59.9,24-121.4,36-184.3,36c-62.9,0-124.6-12-184.9-36c-60.3-24-114.4-60-162.4-108c-48-48-83.9-102-107.9-162c-24-60-36-121.5-36-184.5c0-63,12-124.5,36-184.5c24-60,59.9-114,107.9-162c47.9-48,102.1-83.8,162.4-107.5C376.6,21.8,438.2,10,501.1,10c62.9,0,124.4,11.8,184.3,35.4C745.4,69.1,799.3,104.9,847.3,152.9L847.3,152.9z M730.4,724.5c15.7-15.8,22.7-33.8,20.8-54c-1.9-20.3-10.7-38.3-26.4-54l-118-118.1l118-118.1c15.7-15.8,24.5-33.8,26.4-54c1.9-20.3-5.1-38.3-20.8-54c-15.7-15.8-34.7-23.6-56.8-23.6c-22.1,0-41,7.9-56.8,23.6l-118,117L384.2,274.4c-15.7-15-33.7-23.4-53.9-25.3c-20.2-1.9-38.2,4.7-53.9,19.7c-15.7,15.8-23.6,34.9-23.6,57.4c0,22.5,7.9,41.6,23.6,57.4L391,498.3L276.4,613.1c-15.7,15.8-23.6,34.7-23.6,56.8c0,22.1,7.9,41.1,23.6,56.8c15.7,15.8,33.7,22.7,53.9,20.8c20.2-1.9,38.2-10.7,53.9-26.4l114.6-114.8l118,118.1c15.7,15.8,34.6,23.6,56.8,23.6C695.7,748.1,714.7,740.2,730.4,724.5L730.4,724.5z" />
                    </g>
                </svg>
            </div>
            <div class="msg">{{ msg }}</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            type: "success",
            msg: "",
            time: 4000,
            timer:null
        };
    },
    methods: {
        doDestroyed() {
            clearTimeout(this.timer);
            document.body.removeChild(this.$el);
            this.$destroy();
            window.msgObj = null;
        }
    },
    mounted() {
        if (window.msgObj) {
            window.msgObj.doDestroyed();
        }
        window.msgObj = this;
        this.timer = setTimeout(() => {
            this.doDestroyed();
        }, this.time);
    }
};
</script>
<style lang="less" scoped>
.message-box {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99;
    .message-body {
        width: 200px;
        height: 200px;
        text-align: center;
        background-color: white;
        border-radius: 10%;
        position: absolute;
        margin-top: -100px;
        margin-left: -100px;
        top: 50%;
        left: 50%;
        transform: scale(0);
        box-shadow: 4px 4px 2px #999999;
        animation: show 0.6s forwards;
        @keyframes show {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.4);
            }
            100% {
                transform: scale(1);
            }
        }
        .icon-tip {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top: 20px;
        }
        .msg {
            margin-top: 20px;
            font-size: 26px;
        }
    }
}
</style>
